<template>
  <div>
    <el-form ref="myform" :model="requireInfo" :rules="rules" label-width="100px" size="mini">
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="资产分类" prop="smallTypeCode">
            <treeselect
              v-model="requireInfo.smallTypeCode"
              :multiple="false"
              :options="typeOptions"
              placeholder="选择资产类型"
              :disable-branch-nodes="true"
              @input="inputType"
              @select="selectType"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="数量" prop="quantity">
            <el-input-number v-model.trim="requireInfo.quantity" :min="1" :precision="0" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="规格型号" prop="specifications">
            <!-- <el-input v-model="requireInfo.specifications" placeholder="请填写规格型号" /> -->
            <el-select v-model="specifications" clearable placeholder="请选择规格型号" @change="change">
              <el-option v-for="item in specificationList" :key="item.id" :label="item.specification" :value="item.specification" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="需求明细" prop="detail">
            <el-input v-model="requireInfo.detail" placeholder="请填写需求明细" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import treeselect from '@neu/biz-core/components/TreeSelect'
import { tree } from '@neu/dcam-ui/api/assetType'
import { list } from '@neu/dcam-ui/api/product'

export default {
  components: {
    treeselect
  },
  props: { // 根据id可判断是新建还是更新
    requireInfo: {
      required: false,
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    }
  },
  data() {
    return {
      specifications: null,
      specificationList: [],
      /** 资产类型树 */
      typeOptions: [],
      rules: {
        smallTypeCode: [{
          required: true,
          message: '资产分类不能为空',
          trigger: 'blur'
        }],
        quantity: [{
          required: true,
          message: '数量不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    tree('sl').then(response => {
      this.typeOptions = response.data
    })
  },
  methods: {
    selectType(value) {
      this.requireInfo.smallTypeName = value.title
    },
    inputType(value) {
      this.specifications = null
      if (!value) {
        this.specificationList = []
        this.requireInfo.smallTypeName = ''
      } else {
        list({ 's_assetTypeCode': value }).then(res => {
          this.specificationList = res.data
        })
      }
    },
    change(value) {
      this.requireInfo.specifications = value || ''
    }
  }
}
</script>
